<template>
  <div class="slideDialog_wrap">
     <div class="slideDialog_content">
        <h2 class="slideDialog_contentTitle"><i @click="close" class="slideDialog_close iconfont icon-yuanjiaojuxingkaobei"></i> 每日任务—收集片区使用量 <span>已完成</span> </h2>
        <div class="slideDialog_main">
  <div class="newTask_Wrap">
    <div class="newTask_group clear" v-if="!(show)">
     <div class="newTask_top"><el-button type="primary" size="mini" @click="task_creatd">开始创建</el-button></div>
     <div class="taskItem" v-for="(template,key) in templateData">
       <label>
          <h3>{{template.procName}}</h3>
          <h2>{{template.version}}</h2>
          <h1>{{template.procDesc}}</h1>
         <!-- <el-radio v-model="radio" :label="template.id"></el-radio> -->
         <input type="radio" v-model="procDefId" name="templates" :value="template.id">
       </label>
     </div>
    </div>

<transition name="el-zoom-in-top">
    <div v-if="show">
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple">
          <div class="slideDialog_item">
             <h2 class="group_title">自定义表单中的任务说明</h2>
              <el-form label-width="100px">
                <el-form-item label="任务发起时间" >
                  <el-date-picker
                   v-model="value1"
                   type="datetime"
                   placeholder="选择日期时间">
                 </el-date-picker>
                </el-form-item>
                <el-form-item label="设置结束时间" >
                  <el-date-picker
                   v-model="value2"
                   type="datetime"
                   placeholder="选择日期时间">
                 </el-date-picker>
                 <el-switch
                   v-model="value3"
                   active-text="任务加急">
                 </el-switch>
                 <el-switch
                   v-model="value4"
                   active-color="#13ce66"
                   active-text="当天任务">
                 </el-switch>
                </el-form-item>

                <el-form-item label="任务负责人">
                    <img class="spic" width="34" height="34" src="http://img4.imgtn.bdimg.com/it/u=1121475478,2545730346&fm=27&gp=0.jpg" alt=""><span>王小二—技术经理</span>
                </el-form-item>

              </el-form>
          </div>
          <h3 class="slideDialog_title">任务内容</h3>
          <div class="slideDialog_item">
            <el-form :inline="true">
              <el-form-item label="对手公司" style="width:40%">
                  <el-input placeholder="对手公司"></el-input>
              </el-form-item>
              <el-form-item label="对手公司" style="width:40%">
                <el-select v-model="value" placeholder="请选择">
                  <el-option>顶顶顶</el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="对手区域" style="width:40%">
                  <el-input placeholder="对手区域"></el-input>
              </el-form-item>
              <el-form-item label="客户类型" style="width:40%">
                <el-select v-model="value" placeholder="请选择">
                  <el-option>顶顶顶</el-option>
                </el-select>
              </el-form-item>
              <div class="">
                <h2>备注信息：</h2>
                <el-input
                type="textarea"
                autosize
                placeholder="请输入内容">
                </el-input>
              </div>
            </el-form>
            <el-button type="primary" @click="task_submit">确定</el-button>
          </div>
        </div>
       </el-col>
        </el-row>
    </div>
</transition>
  </div>
</div>
</div>
</div>
</template>
<script>
export default {
  props:["AddDialogVisible","templateData","onSubmit"],
  data(){
    return{
      procDefId:0,
      show:false,
      value:'',
      value1:'',
      value2:'',
      value3:'',
      value4:'',
      form:{
      }
    }
  },
  methods:{
    task_creatd(){
        this.show = true;
    },
    task_submit(){
      this.onSubmit(this.procDefId);
    },
    close(){
        this.$emit('update:AddDialogVisible', false)
    }
  },
  created(){
  },
  mounted(){
    console.log(this.templateData)
  }
}
</script>
<style scoped lang="scss">
  @import "./dialog.scss";
</style>
